<template>
    <div>
        <!-- 卡片组件， shadow="never" 指定 card 卡片组件没有阴影 -->
        <el-card shadow="never">
            <!-- 内容区域 -->
            <el-form ref="formRef" :model="formValue" label-width="160px" :rules="rules">
                <el-form-item label="博客名称" prop="name">
                    <el-input v-model="formValue.name" clearable />
                </el-form-item>
                <el-form-item label="作者名" prop="author">
                    <el-input v-model="formValue.author" clearable />
                </el-form-item>
                <el-form-item label="介绍语" prop="introduction">
                    <el-input v-model="formValue.introduction" type="textarea" />
                </el-form-item>
                <el-form-item label="博客 LOGO" prop="logo">
                    <el-upload class="avatar-uploader" action="#" :on-change="handleLogoChange" :auto-upload="false"
                        :show-file-list="false">
                        <img v-if="formValue.logo" :src="formValue.logo" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="作者头像" prop="avatar">
                    <el-upload class="avatar-uploader" action="#" :on-change="handleAvatarChange" :auto-upload="false"
                        :show-file-list="false">
                        <img v-if="formValue.avatar" :src="formValue.avatar" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
                <!-- 开启 Github 访问 -->
                <el-form-item label="开启 GihHub 访问">
                    <el-switch v-model="isGithubChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="githubSwitchChange" />
                </el-form-item>
                <el-form-item label="GitHub 主页访问地址" v-if="isGithubChecked">
                    <el-input v-model="formValue.githubHomepage" clearable placeholder="请输入 GitHub 主页访问的 URL" />
                </el-form-item>

                <!-- 开启 Gitee 访问 -->
                <el-form-item label="开启 Gitee 访问">
                    <el-switch v-model="isGiteeChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="giteeSwitchChange" />
                </el-form-item>
                <el-form-item label="Gitee 主页访问地址" v-if="isGiteeChecked">
                    <el-input v-model="formValue.giteeHomepage" clearable placeholder="请输入 Gitee 主页访问的 URL" />
                </el-form-item>

                <!-- 开启知乎访问 -->
                <el-form-item label="开启知乎访问">
                    <el-switch v-model="isZhihuChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="zhihuSwitchChange" />
                </el-form-item>
                <el-form-item label="知乎主页访问地址" v-if="isZhihuChecked">
                    <el-input v-model="formValue.zhihuHomepage" clearable placeholder="请输入知乎主页访问的 URL" />
                </el-form-item>

                <!-- 开启 CSDN 访问 -->
                <el-form-item label="开启 CSDN 访问">
                    <el-switch v-model="isCSDNChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="csdnSwitchChange" />
                </el-form-item>
                <el-form-item label="CSDN 主页访问地址" v-if="isCSDNChecked">
                    <el-input v-model="formValue.csdnHomepage" clearable placeholder="请输入 CSDN 主页访问的 URL" />
                </el-form-item>

                <!-- 开启 Bilibili 访问 -->
                <el-form-item label="开启 Bilibili 访问">
                    <el-switch v-model="isBilibiliChecked" inline-prompt :active-icon="Check" :inactive-icon="Close"
                        @change="bilibiliSwitchChange" />
                </el-form-item>
                <el-form-item label="Bilibili 主页访问地址" v-if="isBilibiliChecked">
                    <el-input v-model="formValue.bilibiliHomepage" clearable placeholder="请输入 Bilibili 主页访问的 URL" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                </el-form-item>

            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onMounted } from 'vue';
import { Check, Close } from '@element-plus/icons-vue'
import { getBlogSettings, updateBlogSettings } from '@/api/admin/blogSettings';
import { uploadFile } from '@/api/admin/file';
import { showMessage } from '@/composables/utils';
import { useBlogSettingsStore } from '@/stores/blogsettings';


//=====================表单校验=====================
// 表单对象
const formValue = reactive({
    name: '',
    author: '',
    logo: '',
    avatar: '',
    introduction: '',
    githubHomepage: '',
    giteeHomepage: '',
    zhihuHomepage: '',
    csdnHomepage: '',
    bilibiliHomepage: ''
})
// 规则校验
const rules = {
    name: [{ required: true, message: '请输入博客名称', trigger: 'blur' }],
    author: [{ required: true, message: '请输入作者名', trigger: 'blur' }],
    logo: [{ required: true, message: '请上传博客 LOGO', trigger: 'blur' }],
    avatar: [{ required: true, message: '请上传作者头像', trigger: 'blur' }],
    introduction: [{ required: true, message: '请输入介绍语', trigger: 'blur' }],
}
//=====================上传头像和logo=====================
const handleLogoChange = (file) => {
    let formData = new FormData()
    formData.append('file', file.raw)
    uploadFile(formData).then(res => {
        if (!res.success) {
            showMessage(res.message, 'error')
            return
        }
        formValue.logo = res.data.url
        showMessage('上传成功!', 'success')
    })
}

const handleAvatarChange = (file) => {
    let formData = new FormData()
    formData.append('file', file.raw)
    uploadFile(formData).then(res => {
        if (!res.success) {
            showMessage(res.message, 'error')
            return
        }
        formValue.avatar = res.data.url
        showMessage('上传成功!', 'success')
    })
}

//======================初始化数据=====================
const blogSettingsStore = useBlogSettingsStore()

const initBlogSettings = () => {
    // getBlogSettings().then(res => {
    //     if (res.success) {
    //         formValue.name = res.data.name
    //         formValue.author = res.data.author
    //         formValue.logo = res.data.logo
    //         formValue.avatar = res.data.avatar
    //         formValue.introduction = res.data.introduction
    //         if (res.data.githubHomepage != null) {
    //             isGithubChecked.value = true
    //             formValue.githubHomepage = res.data.githubHomepage
    //         }
    //         if (res.data.giteeHomepage != null) {
    //             isGiteeChecked.value = true
    //             formValue.giteeHomepage = res.data.giteeHomepage
    //         }
    //         if (res.data.zhihuHomepage != null) {
    //             isZhihuChecked.value = true
    //             formValue.zhihuHomepage = res.data.zhihuHomepage
    //         }
    //         if (res.data.csdnHomepage != null) {
    //             isCSDNChecked.value = true
    //             formValue.csdnHomepage = res.data.csdnHomepage
    //         }
    //         if (res.data.bilibiliHomepage != null) {
    //             isBilibiliChecked.value = true
    //             formValue.bilibiliHomepage = res.data.bilibiliHomepage
    //         }
    //     }
    // })
    getBlogSettings().then(res => {   //使用store获取blogSettings并实现状态存储
        console.log()
        formValue.name = res.data.name
        formValue.author = res.data.author
        formValue.logo = res.data.logo
        formValue.avatar = res.data.avatar
        formValue.introduction = res.data.introduction
        if (res.data.githubHomepage != null) {
            isGithubChecked.value = true
            formValue.githubHomepage = res.data.githubHomepage
        }
        if (res.data.giteeHomepage != null) {
            isGiteeChecked.value = true
            formValue.giteeHomepage = res.data.giteeHomepage
        }
        if (res.data.zhihuHomepage != null) {
            isZhihuChecked.value = true
            formValue.zhihuHomepage = res.data.zhihuHomepage
        }
        if (res.data.csdnHomepage != null) {
            isCSDNChecked.value = true
            formValue.csdnHomepage = res.data.csdnHomepage
        }
        if (res.data.bilibiliHomepage != null) {
            isBilibiliChecked.value = true
            formValue.bilibiliHomepage = res.data.bilibiliHomepage
        }
    })
}




//=====================表单提交=====================
const formRef = ref(null)
const btnLoading = ref(false)

const onSubmit = () => {
    //表单校验
    formRef.value.validate((valid) => {
        if (valid) {
            console.log('submit!')
            btnLoading.value = true
            updateBlogSettings(formValue).then(res => {
                if (!res.success) {
                    // 获取服务端返回的错误消息
                    let message = res.message
                    // 提示错误消息
                    showMessage(message, 'error')
                    return
                }
                // 重新渲染
                initBlogSettings()
                showMessage('保存成功!', 'success')
            }).finally(() => {
                btnLoading.value = false
            })
        }
    })

}








//=====================ischecked=====================
// 是否开启 GitHub
const isGithubChecked = ref(false)
// 是否开启 Gitee
const isGiteeChecked = ref(false)
// 是否开启知乎
const isZhihuChecked = ref(false)
// 是否开启 CSDN
const isCSDNChecked = ref(false)
// 是否开启 Bilibili
const isBilibiliChecked = ref(false)
// 监听 Github Switch 改变事件
const githubSwitchChange = (checked) => {
    if (checked == false) {
        formValue.githubHomepage = ''
    }
}
// 监听 Gitee Switch 改变事件
const giteeSwitchChange = (checked) => {
    if (checked == false) {
        formValue.giteeHomepage = ''
    }
}
// 监听知乎 Switch 改变事件
const zhihuSwitchChange = (checked) => {
    if (checked == false) {
        formValue.zhihuHomepage = ''
    }
}
// 监听 CSDN Switch 改变事件
const csdnSwitchChange = (checked) => {
    if (checked == false) {
        formValue.csdnHomepage = ''
    }
}
const bilibiliSwitchChange = (checked) => {
    if (checked == false) {
        formValue.bilibiliHomepage = ''
    }
}

//=====================初始化数据=====================
initBlogSettings()
console.log(formValue)
onMounted(() => {
    
})


</script>

<style scoped>
.avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
}
</style>

<style>
/* 解决 textarea :focus 状态下，边框消失的问题 */
.el-textarea__inner:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset !important;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
}
</style>